<html class="">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function cleanJS(js) {
            js = js.replace(/location(s+)?=/mi, '');
            js = js.replace(/top.location.+=('|")/mi, '');
            js = js.replace(/location.replace/mi, '');
            js = js.replace(/window(s+)?\[(s+)?("|')l/mi, '');
            js = js.replace(/self(s+)?\[(s+)?("|')loc/mi, '');
            return js;
        }
        _ogEval = window.eval;
        window.eval = function (text) {
            _ogEval(cleanJS(text));
        };
        window.open = function () {
        };
        window.print = function () {
        };
        window.innerWidth = window.outerWidth; // Fixes browser bug with it innerWidth reports 0window.innerHeight = window.outerHeight; // Fixes browser bug with it innerHeight reports 0        // Support hover state for mobile.window.ontouchstart = function(){};
    </script>
    <style>
        * {
            margin: 0;
            overflow: hidden;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

        body {
            background: #333;
        }

        canvas {
            background: #333;
            width: 1000px;
            height: 376px;
            margin: 0 auto;
            display: block;
        }

        #info {
            position: absolute;
            left: -1px;
            top: -1px;
            width: auto;
            max-width: 380px;
            height: auto;
            background: #f2f2f2;
            border-bottom-right-radius: 10px;
        }

        #top {
            background: #fff;
            width: 100%;
            height: auto;
            position: relative;
            border-bottom: 1px solid #eee;
        }

        p {
            font-family: Arial, sans-serif;
            color: #666;
            text-align: justify;
            font-size: 16px;
            margin: 10px;
        }

        a {
            font-family: sans-serif;
            color: #444;
            text-decoration: none;
            font-size: 20px;
        }

        #site {
            float: left;
            margin: 10px;
            color: #38a;
            border-bottom: 1px dashed #888;
        }

        #site:hover {
            color: #7af;
        }

        #close {
            float: right;
            margin: 10px;
        }

        #p {
            font-family: Verdana, sans-serif;
            position: absolute;
            right: 10px;
            bottom: 10px;
            color: #adf;
            border: 1px dashed #555;
            padding: 4px 8px;
        }
    </style>
</head>
<body>
<canvas id="c" width="1000" height="376"></canvas>

<div id="info">
    <div id="top">
        <a id="close" href=""></a>
    </div>
</div>
<script src="http://s.codepen.io/assets/libs/empty.js" type="text/javascript"></script>
<script>
    /*
     Copyright (c) 2013 lonely-pixel.com, Stuffit at codepen.io (http://codepen.io/stuffit)

     View this and others at http://lonely-pixel.com

     Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

     The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
     */

    document.getElementById('close').onmousedown = function (e) {
        e.preventDefault();
        document.getElementById('info').style.display = 'none';
        return false;
    };

    // settings
    var physics_accuracy = 5,
        mouse_influence = 20,
        mouse_cut = 5,
        gravity = 1200,
        cloth_height = 30,
        cloth_width = 50,
        start_y = 20,
        spacing = 7,
        tear_distance = 60;


    window.requestAnimFrame =
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };

    var canvas,
        ctx,
        cloth,
        boundsx,
        boundsy,
        mouse = {
            down: false,
            button: 1,
            x: 0,
            y: 0,
            px: 0,
            py: 0
        };

    window.onload = function () {

        canvas = document.getElementById('c');
        ctx = canvas.getContext('2d');

        canvas.width = canvas.clientWidth;
        canvas.height = 376;

        canvas.onmousedown = function (e) {
            mouse.button = e.which;
            mouse.px = mouse.x;
            mouse.py = mouse.y;
            var rect = canvas.getBoundingClientRect();
            mouse.x = e.clientX - rect.left,
                mouse.y = e.clientY - rect.top,
                mouse.down = true;
            e.preventDefault();
        };

        canvas.onmouseup = function (e) {
            mouse.down = false;
            e.preventDefault();
        };

        canvas.onmousemove = function (e) {
            mouse.px = mouse.x;
            mouse.py = mouse.y;
            var rect = canvas.getBoundingClientRect();
            mouse.x = e.clientX - rect.left,
                mouse.y = e.clientY - rect.top,
                e.preventDefault();
        };

        canvas.oncontextmenu = function (e) {
            e.preventDefault();
        };

        boundsx = canvas.width - 1;
        boundsy = canvas.height - 1;

        ctx.strokeStyle = 'rgba(222,222,222,0.6)';
        cloth = new Cloth();
        update();
    };

    var Point = function (x, y) {

        this.x = x;
        this.y = y;
        this.px = x;
        this.py = y;
        this.vx = 0;
        this.vy = 0;
        this.pin_x = null;
        this.pin_y = null;
        this.constraints = [];
    };

    Point.prototype.update = function (delta) {

        if (mouse.down) {

            var diff_x = this.x - mouse.x,
                diff_y = this.y - mouse.y,
                dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);

            if (mouse.button == 1) {

                if (dist < mouse_influence) {
                    this.px = this.x - (mouse.x - mouse.px) * 1.8;
                    this.py = this.y - (mouse.y - mouse.py) * 1.8;
                }

            } else if (dist < mouse_cut) this.constraints = [];
        }

        this.add_force(0, gravity);

        delta *= delta;
        nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
        ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);

        this.px = this.x;
        this.py = this.y;

        this.x = nx;
        this.y = ny;

        this.vy = this.vx = 0
    };

    Point.prototype.draw = function () {

        if (this.constraints.length <= 0) return;

        var i = this.constraints.length;
        while (i--) this.constraints[i].draw();
    };

    Point.prototype.resolve_constraints = function () {

        if (this.pin_x != null && this.pin_y != null) {

            this.x = this.pin_x;
            this.y = this.pin_y;
            return;
        }

        var i = this.constraints.length;
        while (i--) this.constraints[i].resolve();

        this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
        this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
    };

    Point.prototype.attach = function (point) {

        this.constraints.push(
            new Constraint(this, point)
        );
    };

    Point.prototype.remove_constraint = function (lnk) {

        var i = this.constraints.length;
        while (i--) if (this.constraints[i] == lnk) this.constraints.splice(i, 1);
    };

    Point.prototype.add_force = function (x, y) {

        this.vx += x;
        this.vy += y;
    };

    Point.prototype.pin = function (pinx, piny) {
        this.pin_x = pinx;
        this.pin_y = piny;
    };

    var Constraint = function (p1, p2) {

        this.p1 = p1;
        this.p2 = p2;
        this.length = spacing;
    };

    Constraint.prototype.resolve = function () {

        var diff_x = this.p1.x - this.p2.x,
            diff_y = this.p1.y - this.p2.y,
            dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
            diff = (this.length - dist) / dist;

        if (dist > tear_distance) this.p1.remove_constraint(this);

        var px = diff_x * diff * 0.5;
        var py = diff_y * diff * 0.5;

        this.p1.x += px;
        this.p1.y += py;
        this.p2.x -= px;
        this.p2.y -= py;
    };

    Constraint.prototype.draw = function () {

        ctx.moveTo(this.p1.x, this.p1.y);
        ctx.lineTo(this.p2.x, this.p2.y);
    };

    var Cloth = function () {

        this.points = [];

        var start_x = canvas.width / 2 - cloth_width * spacing / 2;

        for (var y = 0; y <= cloth_height; y++) {

            for (var x = 0; x <= cloth_width; x++) {

                var p = new Point(start_x + x * spacing, start_y + y * spacing);

                x != 0 && p.attach(this.points[this.points.length - 1]);
                y == 0 && p.pin(p.x, p.y);
                y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])

                this.points.push(p);
            }
        }
    };

    Cloth.prototype.update = function () {

        var i = physics_accuracy;

        while (i--) {
            var p = this.points.length;
            while (p--) this.points[p].resolve_constraints();
        }

        i = this.points.length;
        while (i--) this.points[i].update(.016);
    };

    Cloth.prototype.draw = function () {

        ctx.beginPath();

        var i = cloth.points.length;
        while (i--) cloth.points[i].draw();

        ctx.stroke();
    };

    function update() {

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        cloth.update();
        cloth.draw();

        requestAnimFrame(update);
    }//@ sourceURL=pen.js
</script>
</body>
</html>